<template>
  <div class="club-details-container">
    <!-- 社团信息展示区 -->
    <el-card class="club-info-card" shadow="hover">
      <h1 class="club-name">{{ clubDetails?.clubName }}</h1>
      <div class="info">
        <el-icon><User /></el-icon>
        <span>人数: {{ clubDetails?.memberCount }}</span>
      </div>
      <div class="tags">
        <el-tag
          v-for="tag in clubDetails?.tags"
          :key="tag"
          type="success"
          style="margin-right: 8px"
        >
          {{ tag }}
        </el-tag>
      </div>
      <p class="description">{{ clubDetails?.introduction }}</p>
      <div class="actions">
        <el-button type="primary" size="small" @click="handleUpdate"
          >修改社团信息</el-button
        >
      </div>
    </el-card>
    <div class="sub-sections">
      <!-- 社长信息展示区 -->
      <el-card class="section leader-info-card" shadow="hover">
        <p class="leader-name">社长: {{ clubDetails?.userVO.userName }}</p>
        <p>专业: {{ clubDetails?.userVO.major || "未填写" }}</p>
        <p>账号: {{ clubDetails?.userVO.userAccount }}</p>
        <p>联系方式: {{ clubDetails?.userVO.phoneNumber || "未填写" }}</p>
        <div class="actions">
          <el-button type="primary" size="small" @click="handleUpdate"
            >更换社长</el-button
          >
        </div>
      </el-card>
      <!-- 社团公告展示区 -->
      <el-card class="section announcement-info-card" shadow="hover">
        <p class="announcement-title" v-if="clubDetails?.clubAnnouncementVo">
          {{ clubDetails?.clubAnnouncementVo.title }}
        </p>
        <p v-else>暂无公告</p>
        <p v-if="clubDetails?.clubAnnouncementVo">
          {{ clubDetails?.clubAnnouncementVo.content }}
        </p>
        <div class="actions">
          <el-button
            type="primary"
            size="small"
            v-if="clubDetails?.clubAnnouncementVo"
            @click="toAnnouncementDetail"
            >公告详情</el-button
          >
          <el-button type="primary" size="small" @click="editAnnouncement"
            >编辑公告</el-button
          >
        </div>
      </el-card>
      <!-- 社团活动展示区 -->
      <el-card class="section activity-info-card" shadow="hover">
        <div class="activity-header">
          <h3 class="activity-title" v-if="recentActivity?.activityTitle">
            {{ recentActivity?.activityTitle }}
          </h3>
          <p v-else class="activity-title">暂无活动</p>

          <div v-if="recentActivity?.status" class="activity-status">
            <span>活动状态: </span>
            <el-tag>{{ recentActivity?.status }}</el-tag>
          </div>
        </div>

        <p v-if="recentActivity?.activityContent">
          {{ recentActivity?.activityContent }}
        </p>
        <div class="actions">
          <el-button
            type="primary"
            size="small"
            v-if="recentActivity?.activityTitle"
            @click="toActivityDetail"
          >活动详情</el-button
          >
          <el-button type="primary" size="small" @click="createActivity">创建活动</el-button>
        </div>
      </el-card>
    </div>
    <div class="action-bar">
      <el-button type="primary" size="small" @click="deleteClub">注销社团</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { User } from "@element-plus/icons-vue";
import {
  ActivityControllerService,
  type ActivityQueryRequest,
  ClubControllerService,
} from "../../../../generated";
import { useUserStore } from "../../../stores/user.ts";
import { ElMessage } from "element-plus";
import {useRouter} from "vue-router";

interface Club {
  id: number;
  clubName: string;
  userVO: {
    userName: string;
    userAccount: string;
    phoneNumber: string | null;
    major: string | null;
    grade: string | null;
  };
  tags: string[];
  introduction: string;
  memberCount: number;
  clubAnnouncementVo: {
    id: number;
    title: string;
    content: string;
    createTime: string;
    isDelete: string;
  };
}

interface ShowedActivity {
  id: number;
  activityTitle: string;
  activityContent: string;
  status: string;
}

const clubDetails = ref<Club | null>(null);
const recentActivity = ref<ShowedActivity | null>(null);

const loadClubDetails = async () => {
  const store = useUserStore();
  try {
    const clubResponse = await ClubControllerService.getClubVoById(
      store.managedClubId,
    );
    if (clubResponse.code === 0 && clubResponse.data) {
      clubDetails.value = clubResponse.data; // 存储社团详情数据
    } else {
      clubDetails.value = null; // 如果数据为空或格式不正确，设置为 null
      ElMessage.error("加载社团详情失败:" + clubResponse.message);
    }

    const activityQueryRequest = {
      clubId: store.managedClubId,
    } as ActivityQueryRequest;
    const activitiesResponse =
      await ActivityControllerService.listActivityVoByPage(
        activityQueryRequest,
      );
    if (activitiesResponse.code === 0) {
      recentActivity.value = activitiesResponse.data?.records[0];
    } else {
      clubDetails.value = null; // 如果数据为空或格式不正确，设置为 null
      ElMessage.error("加载活动详情失败:" + activitiesResponse.message);
    }
  } catch (error) {
    clubDetails.value = null; // 如果接口调用失败，设置为 null
    console.error("加载数据时发生错误:", error.message || error);
  }
};

onMounted(() => {
  loadClubDetails();
});

const router = useRouter()
const handleUpdate = () => {
  window.open("/manager/club/update", "_blank");
};

const toAnnouncementDetail = () => {
  router.push({
    path: '/manager/announcement/info',
    query: { id: clubDetails.value?.clubAnnouncementVo.id }
  });
};

const editAnnouncement = () => {
  window.open("/manager/announcement/edit", "_blank");
};

const toActivityDetail = () => {
  router.push({
    path: '/manager/activity/info',
    query: { activityId: recentActivity.value?.id }
  });
}

const createActivity = () => {
  window.open("/manager/activity/create", "_blank");
}

const deleteClub = () => {
  router.push({
    path: '/application/add/delete-club',
  });
}
</script>

<style scoped>
.club-details-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  box-sizing: border-box;
}

.club-info-card {
  background-color: #e0e7ff;
  padding: 20px;
  border-radius: 8px;
  flex: 1;
  position: relative;
}

.club-name {
  font-size: 24px;
  font-weight: bold;
  color: #5c6bc0;
  margin-bottom: 10px;
}

.info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  color: #3f51b5;
}

.tags {
  margin: 10px 0;
}

.description {
  margin: 10px 0;
  color: #3f51b5;
}

.sub-sections {
  display: flex;
  gap: 20px;
  flex: 2;
}

.section {
  flex: 1;
  padding: 20px;
  border-radius: 8px;
  position: relative;
}

.leader-info-card {
  background-color: #fce4ec;
}

.announcement-info-card {
  background-color: #e1bee7;
}

.activity-info-card {
  background-color: #d1c4e9;
}

p {
  color: #3f51b5;
}

.actions {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  gap: 10px;
}
.leader-name {
  font-size: 20px;
  font-weight: bold;
}

.announcement-info-card {
  background-color: #e1bee7;
}

.announcement-title,
.activity-title {
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
  color: #5c6bc0;
}

.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.activity-status {
  display: flex;
  align-items: center;
  font-size: 0.9em;
  text-align: right;
}

.activity-status span {
  margin-right: 5px;
}

.action-bar{
  display: flex;
  justify-content: flex-end;
}
</style>
